<template>
    <div>
        <Card  style="height: 100px;cursor: pointer;" :bordered="false" :padding = "30">
            <div class="container">
                <div class="content1">
                    <img :src="cardInfo.cardImgUrl" style ="height:40px;width:auto;overflow: hidden;position: relative;"/>
                </div>
                <div class="content2">
                    <p>{{cardInfo.webName}}</p>
                    <p style = "font-size: 10px;color: rgb(186, 187, 194);padding-top: 3px;">{{cardInfo.description}}</p>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
export default{
    name:"netCard",
    props:{
        cardInfo:{
            type:Object
        }
    }
}
</script>

<style lang = "less">
    .container{
        //border: 1px solid ;
        height: 100px;
        width: 220px;
        /* 设置为弹性盒子 */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -30px;
        margin-left: -28px;
    }
    .content1{
        
        //border: 1px solid;
        margin-left: 5px;
        //padding-left: -25px;
    }
    .content2{
        text-align:left;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 145px;
        height: 60px;
        font-family: Microsoft YaHei;
        //border: 1px solid;
    }
    .content2:hover{
        color: #6b83fb;
    }
</style>